<template>
    <div class="home">
        <!-- //二级路由坑 -->
        <router-view v-if="$route.path == '/home/search'"></router-view>
        <div v-else>
            <!-- 搜索框 -->
            <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" 
                @click="$router.push('/home/search')" />
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <!-- 轮播图 -->
                <Swiper :bannerArr="bannerArr"></Swiper>
                <!-- 导航 -->
                <Grid :channelArr="channelArr"></Grid>
                <!-- 品牌制造商 -->
                <Brand :brandList="brandList"></Brand>
            </van-pull-refresh>

            <!-- new newGoodsList -->
            <NewGoodsList :newGoodsList="newGoodsList"></NewGoodsList>
            <!-- hot 人气推荐 -->
            <HotGoodsList :hotGoodsList="hotGoodsList"></HotGoodsList>
            <!-- 专题精选 -->
            <TopicList :topicListArr="topicListArr"></TopicList>
            <!-- 引入最后组件 -->
            <GoodsL :goodsLArr='goodsLArr'></GoodsL>
        </div>
    </div>
</template>
<script>
// 搜索框
// import value from 'less/lib/less/tree/value';

//引入轮播图
import Swiper from '@/components/Swiper.vue'
//引入导航
import Grid from '@/components/Grid.vue'
//引入 品牌制造商
import Brand from '@/components/Brand.vue'
//引入new goodlist
import NewGoodsList from '@/components/NewGoodsList.vue'
//引入hot 人气推荐
import HotGoodsList from '@/components/HotGoodsList.vue'
//引入  TopicList 专题精选
import TopicList from '@/components/TopicList.vue'
//引入最后的
import GoodsL from '@/components/GoodsL.vue'
//导入首页接口请求
import { getIndexData } from '@/utils/http'

import {Toast} from 'vant'
export default {
    name: 'Home',
    data() {
        return {
            value: '', //搜索框
            bannerArr: [],//轮播图
            channelArr: [],//导航数组
            brandList: [], //品牌制造商
            newGoodsList: [], // newGoodsList
            hotGoodsList: [], //hot 人气推荐
            topicListArr: [],//专题精选
            goodsLArr: [],
            isLoading: false// 下拉刷新状态


        }
    },
    components: {
        Swiper,
        Grid,
        Brand,
        NewGoodsList,
        HotGoodsList,
        TopicList,
        GoodsL
    },
    methods: {
         onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;

            }, 1000);

        },
       
    },
        created() {
            getIndexData().then((res) => {
                // console.log(this.$route.path); //查看路由
                console.log(res);
                this.bannerArr = res.data.data.banner;
                this.channelArr = res.data.data.channel;
                this.brandList = res.data.data.brandList;
                this.newGoodsList = res.data.data.newGoodsList;
                this.hotGoodsList = res.data.data.hotGoodsList;
                this.topicListArr = res.data.data.topicList;
                this.goodsLArr = res.data.data.categoryList;

            },


            )
        }
        }
    
</script>
<style scoped lang="less">
.home {
    padding-bottom: 50px;
}
</style>